<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 400px;
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
<script>
    
    ;(function(){
        //获取元素
        var box = document.querySelector('.box');
        //注册事件
        box.onmousedown = function(e){
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            document.onmousemove = function(e){
                box.style.left = e.pageX-x + 'px'
                box.style.top = e.pageY-y + 'px'
            }
        }
        box.onmouseup = function(){
            document.onmousemove = null;
        }
    }())
</script>
<script src="../jquery-1.12.4.js"></script>
<script>
    // $(function(){
    //     $('.box').on('mousedown',function(e){
    //         console.log($('.box').position().left);
            
    //         var x = e.pageX - $('.box').position().left;
    //         var y = e.pageY - $('.box').position().top;
    //         $(window).on('mousemove',function(e){
    //             $('.box').offset({left:e.pageX-x,top:e.pageY-y})
    //         })
    //     })
    //     $('.box').on('mouseup',function(){
    //         $(window).off('mousemove')
    //     })
    // })
</script>
</html>